<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>hello react</title>
    <style></style>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react Dom库 用于支持 react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将 jsx 转为 js -->
    <script src="../js/babel.min.js"></script>

    <!-- 使用babel 转译jsx -->
    <script type="text/babel">
      // 下面的执行顺序
      // 1.constructor
      // 2.componentWillMount
      // 3.render
      // 4.componentDidMount
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = { count: 0 };
        }

        add = () => {
          let { count } = this.state;
          this.setState({
            count: (count += 1),
          });
        };
        death = () => {
          // 组件卸载
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log("componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        // 组件将要卸载
        componentWillUnmount() {
          console.log("componentWillUnmount");
        }
        // 控制组件更新的阀门
        // 不写这个底层会默认补上，并且返回true
        shouldComponentUpdate() {
          console.log("shouldomponentUpdate");
          // 没写这个生命周期函数里面就会默认返回true
          // 返回 false 的话,后面的生命周期就会被终止不能执行
          return true;
        }
        // 组件将要更新
        componentWillUpdate() {
          console.log("componentWillUpdate");
        }
        // 组件更新完毕
        componentDidUpdate() {
          console.log("componentDidUpdate");
        }
        render() {
          console.log("render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为:{count}</h2>
              <button onClick={this.add}>点击我+1</button>
              <button onClick={this.death}>卸载组件</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>
